<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no ">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>教育</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  
    <style>
   @media  (min-width:480px) and (max-width:767px){
    .list_box{
        margin-top:-25px;
        margin-left:-40px;
        width: 350px;
        height: 200px;
    }
   
    .list_box>p{
        font-size: 15px
    }
    .list_box ul>li{
        font-size: 14px;
        height: 10px;
        width: 200px;
        margin-left:5px;
        float: left;
        margin: 5px;
    }
    .box_three{
        width: 100%;
    height: 650px;
    }
    .list_pp{
    margin-bottom: 0px
}
}
@media  (min-width:767px) and (max-width:1200px){
    .list_box{
        margin-top:-25px;
        margin-left:-40px;
        width: 350px;
        height: 200px;
    }
   
    .list_box>p{
        font-size: 22px
    }
    .list_box ul>li{
        font-size: 16px;
        height: 12px;
    }
    .box_three{
        width: 100%;
    height: 550px;
    }
    .list_pp{
    margin-bottom: 0px
}
}
</style>
</head>
<body>
 <!-- 导航 -->

    <nav class="navbar navbar-default" style="background: #333;">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header" style="margin-left:5%">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <img src="img/logoNav.png" alt="" style="width: 120px;height: 40px;background-size: 100% 100%;margin-top:5px">
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" style="margin-left:5%">
            
              <li><a href="#">首页</a></li>
              <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">产品</a>
                    <ul class="dropdown-menu" style="background:#333">
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                        <li> <a href="#"><img src="img/product-icon-feather.jpg" alt="">Egret Engine</a></li>
                       </ul>
                  </li>
              <li><a href="#">解决方案</a></li>
              <li><a href="#">开发者中心</a></li>
              <li><a href="#">案例</a></li>
              <li><a href="#">众包平台</a></li>
              <li><a href="#">教育</a></li>
              <li><a href="#">广告</a></li>
              <li><a href="#">区块链实验室</a></li>
              <li><a href="#">社区</a></li>
              <li><a href="#">关于我们</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" style="margin-right:5%">
              <li  class="right_top_logo">EN</li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
 
 <!-- 内容背景 -->
   
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top:-20px;position: relative;">
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="img/headerBg.jpg" alt="...">
                <div style="position: absolute;left:25%;top:25%;color:#fff;" class="list_box"> 
                <p>专注培养H5游戏人才的摇篮</p>
              
                      <ul class="list_header">
                              <li>白鹭专家课</li>
                              <li>白鹭专授课</li>
                              <li>白鹭专家课</li>
                              <li>白鹭专家课</li>
                          </ul>
                         
              </div>
            </div>
          </div>
      <!-- 加入H5游戏行业的价值 -->
      <div class="container text-center" style="padding-top:50px;padding-bottom: 50px;">
          <h1 style="margin-bottom:30px;">加入H5游戏行业的价值</h1>
      <div class="row">
                    <div class="col-sm-6 col-md-3 text-center">

                        <div class="hover_box" style="margin: 0 auto;">   <span class="glyphicon glyphicon-stats" style="color:#fff;font-size:50px;line-height:120px"></span></div>

                    <div class="caption">
                    <h3>薪资待遇好</h3>
                    <p>百家名企合作</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 text-center">

                        <div class="hover_box" style="margin: 0 auto;">   <span class="glyphicon glyphicon-stats" style="color:#fff;font-size:50px;line-height:120px"></span></div>

                    <div class="caption">
                    <h3>薪资待遇好</h3>
                    <p>百家名企合作</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 text-center">

                        <div class="hover_box" style="margin: 0 auto;">   <span class="glyphicon glyphicon-stats" style="color:#fff;font-size:50px;line-height:120px"></span></div>
                    <div class="caption">
                    <h3>薪资待遇好</h3>
                    <p>百家名企合作</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 text-center">

                        <div class="hover_box" style="margin: 0 auto;">   <span class="glyphicon glyphicon-stats" style="color:#fff;font-size:50px;line-height:120px"></span></div>

                    <div class="caption">
                    <h3>薪资待遇好</h3>
                    <p>百家名企合作</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                    </div>
                </div>
          </div>
        </div>

        <!--势课程优  -->
        <div class="row box_three">
            <div class="container" style="padding-top:30px;">
                <h1 style="color:#fff" class=" text-center">课程优势</h1>
                <div class="col-xs-12 col-md-5">
                    <h3 style="color:#fff">人脉圈子，高端大咖</h3>
                    <p  class="list_pp">与志同道合的开发者一起共同发展，进入大共同发展，进入大共同发展，进入大共同发展，进入大共同发展，进入大咖圈子，拥有与圈内大牛面对面交流技术的机遇，拓展积累高端人脉资源。</p>
                    <h3 style="color:#fff">  大量实例，针对教学</h3>
                    <p style="color:#fff;border-top:2px solid #fff;padding-top:5px">结合实例开发，专注HTML5游戏教学，涵盖游戏类型设定分析、方案讨论、方案确认、人员分工、游戏设计、游戏开发、游戏调试、研发总结、游戏上线等完整项目开发全流程。</p>
                </div>
                <div class="col-md-1"></div>
                <div class="col-xs-12 col-md-5">
                        <h3 style="color:#fff">课程优势，专注实践</h3>
                        <p class="list_pp">案例教学，易于深造，深入浅出的剖析HTML5技术原理，同时结合大量丰富实践，讲解传授HTML5游戏开发经验和误区，帮助开发者打下坚实实践基础。</p>
                        <h3 style="color:#fff">  大量实例，针对教学</h3>
                        <p style="color:#fff;border-top:2px solid #fff;padding-top:5px">结合实例开发，专注HTML5游戏教学，涵盖游戏类型设定分析、方案讨论、方案确认、人员分工、游戏设计、游戏开发、游戏调试、研发总结、游戏上线等完整项目开发全流程。</p>
                </div>

            </div>
        </div>
        <!-- 课程介绍 -->
        <div class="container" style="padding-bottom:50px;">
            <h1 class="text-center" style="margin: 50px auto;">课程介绍</h1>
        <table class="table table-bordered text-center">
                <tr style="background:#23d2bb">
                  <th class="text-center"style="height:60px;line-height:60px;height:60px;">序列号</th>
                  
                  <th class="text-center"style="background:#23d2bb;line-height:60px;height:60px;">班级</th>
                  <th class="text-center"style="background:#23d2bb;line-height:60px;height:60px;">班级</th>
                  <th class="text-center"style="background:#23d2bb;line-height:60px;height:60px;">班级</th>
                  <th class="text-center"style="background:#23d2bb;line-height:60px;height:60px;">班级</th>
                </tr>
                <tr>
                  <td style="line-height:60px;height:60px;">1</td>
                  <td style="line-height:60px;height:60px;">小明</td>
                  <td style="line-height:60px;height:60px;">1</td>
                  <td style="line-height:60px;height:60px;">小明</td>
                  <td style="line-height:60px;height:60px;">1</td>
         
            
                </tr>
                <tr>
                        <td style="line-height:60px;height:60px;">1</td>
                        <td style="line-height:60px;height:60px;">小明</td>
                        <td style="line-height:60px;height:60px;">1</td>
                        <td style="line-height:60px;height:60px;">小明</td>
                        <td style="line-height:60px;height:60px;">1</td>
                </tr>
                <tr>
                        <td style="line-height:60px;height:60px;">1</td>
                        <td style="line-height:60px;height:60px;">小明</td>
                        <td style="line-height:60px;height:60px;">1</td>
                        <td style="line-height:60px;height:60px;">小明</td>
                        <td style="line-height:60px;height:60px;">1</td>
                </tr>
                <tr>
                        <td style="line-height:60px;height:60px;">1</td>
                        <td style="line-height:60px;height:60px;">小明</td>
                        <td style="line-height:60px;height:60px;">1</td>
                        <td style="line-height:60px;height:60px;">小明</td>
                        <td style="line-height:60px;height:60px;">1</td>
                      </tr>
                <tr>
                        <td style="line-height:60px;height:60px;">1</td>
                        <td style="line-height:60px;height:60px;">小明</td>
                        <td style="line-height:60px;height:60px;">1</td>
                        <td style="line-height:60px;height:60px;">小明</td>
                        <td style="line-height:60px;height:60px;">1</td>
                </tr>
              </table>
            </div>
            <!-- 精选视频 -->
            <div class="container">
                <h1 class="text-center">精选视频课程</h1>
                <div>

                </div>
            </div>
        <script>
            $(function(){
                var hover_box = $('.hover_box');
                console.log(hover_box.length)
                hover_box.mouseover(function(){
                    $(this).addClass('hover_box11')
                }).mouseout(function(){
                    $(this).removeClass('hover_box11')
                })
            })
        </script>
</body>
</html>